<template>
  <div class="view">
    <el-row class="handle-box">
      <el-button class="jianbianbule" type="primary" icon="el-icon-plus" @click="handleAdd">{{
        $t("menu.menu")
      }}</el-button>
    </el-row>
    <div class="tablebox">
      <template>
        <el-table
          size="mini"
          :data="tables"
          row-key="menuId"
          :tree-props="{ children: 'children' }"
          stripe
          class="tablefisbox"
        >
          <el-table-column type="index" :label="$t('public.number')" width="80">
          </el-table-column>
          <el-table-column prop="menuName" :label="$t('menu.menuName')">
          </el-table-column>
          <el-table-column prop="menuEnName" :label="$t('menu.menuEnName')">
          </el-table-column>
          <el-table-column
            prop="parentName"
            :label="$t('menu.parentName')"
          ></el-table-column>
          <el-table-column prop="menuType" :label="$t('menu.menuType')">
          </el-table-column>
          <el-table-column prop="url" :label="$t('menu.url')">
          </el-table-column>
          <el-table-column prop="icon" :label="$t('menu.icon')">
            <template slot-scope="scope">
              <i :class="'iconfont ' + scope.row.icon"></i>
            </template>
          </el-table-column>
          <el-table-column prop="sort" :label="$t('menu.sort')">
          </el-table-column>
          <el-table-column :label="$t('public.operation')" width="250">
            <template slot-scope="scope">
              <el-button
                type="warning"
                icon="el-icon-edit"
                round
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ $t("public.edit") }}</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                class="red"
                round
                size="mini"
                @click="handleDel(scope.$index, scope.row)"
                >{{ $t("public.del") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--工具条-->
      <el-col class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageSize"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </div>
    <!--编辑界面-->
    <el-dialog
      class="dialogs"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="700px"
    >
      <el-form ref="editForm" :model="editForm" :rules="editFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('menu.menuName')" prop="menuName">
              <el-input v-model="editForm.menuName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.menuEnName')" prop="menuEnName">
              <el-input v-model="editForm.menuEnName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('menu.url')" prop="urls">
              <el-input v-model="editForm.urls"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.parentName')" prop="parentId">
              <el-select
                v-model="editForm.parentId"
                clearable
                filterable
                :placeholder="$t('public.select')"
              >
                <el-option
                  v-for="item in optionsParentId"
                  :key="item.menuId"
                  :label="item.menuName"
                  :value="item.menuId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('menu.icon')" prop="menuIcon">
              <el-input v-model="editForm.menuIcon"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.menuType')" prop="menuType">
              <el-select
                v-model="editForm.menuType"
                clearable
                filterable
                :placeholder="$t('public.select')"
              >
                <el-option
                  v-for="item in MenuTypedata"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('menu.sort')" prop="sort">
              <el-input v-model="editForm.sort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false" type="success">{{
          $t("public.cancelbtn")
        }}</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          type="primary"
          @click="createData"
          >{{ $t("public.savebtn") }}</el-button
        >
        <el-button v-else type="primary" @click="updateData">{{
          $t("public.changebtn")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogStatus: "", //编辑框界面切换
      textMap: {
        //添加与编辑界面
        update: this.$t("public.edit"),
        create: this.$t("public.create"),
      },
      dialogFormVisible: false, //弹窗
      tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      //是否必填项
      editFormRules: {
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        menuEnName: [
          { required: true, message: "请输入英文名称", trigger: "blur" },
        ],
        menuType: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入显示顺序", trigger: "blur" }],
      },
      //编辑界面数据
      editForm: {
        menuName: "",
        menuEnName: "",
        parentId: "",
        menuType: "",
        urls: "",
        menuIcon: "",
        sort: "",
      },
      //父级菜单
      optionsParentId: [],
      //类型
      MenuTypedata: [
        {
          value: "1",
          label: "目录",
        },
        {
          value: "2",
          label: "菜单",
        },
        {
          value: "3",
          label: "按钮",
        },
      ],
    };
  },
  mounted() {
    this.getMenu();
    this.menuSelect();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getBlock();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getBlock();
    },
    //编辑参数
    handleEdit(index, row) {
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.editForm = {
        menuId: row.menuId,
        menuName: row.menuName,
        menuEnName: row.menuEnName,
        parentId: row.parentId,
        menuType: row.menuType,
        urls: row.url,
        menuIcon: row.icon,
        sort: row.sort,
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //新增参数
    handleAdd() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.editForm = {
        menuName: "",
        menuEnName: "",
        parentId: "",
        menuType: "",
        urls: "",
        menuIcon: "",
        sort: "",
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //获取
    async getMenu() {
      try {
        let params = {
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.management.getMenu(params);
        this.tables = res.data;
      } catch (e) {
        e;
      }
    },
    //获取菜单下拉数据
    async menuSelect() {
      let option = await this.$api.management.menuSelect();
      this.optionsParentId = option.data;
    },
    //添加
    createData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.management.addMenu(params);
          if (res.code == 200) {
            this.$message({
              message: this.$t("public.addsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false; //关闭弹窗
            this.getMenu(); //刷新数据
            this.menuSelect();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //修改 调用方法
    updateData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.management.editMenu(params);
          if (res.code == 200) {
            this.$message({
              message: this.$t("public.editsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false;
            this.getMenu(); //刷新数据
            this.menuSelect();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //删除 调用方法
    handleDel(index, row) {
      // 二次确认删除
      this.$confirm(
        this.$t("public.confirmcontent"),
        this.$t("public.confirmtitle"),
        {
          type: "warning",
        }
      )
        .then(async () => {
          let params = {
            id: row.menuId,
            usid: JSON.parse(this.$store.state.userInfo).uid,
          };
          let res = await this.$api.management.removeMenu(params);
          if (res.code == 200) {
            this.$message.success(this.$t("public.confirmtips1"));
            this.getMenu(); //刷新数据
            this.menuSelect();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang='less' scoped>
/deep/.el-table__expand-icon .el-icon-arrow-right:before {
  content: "\e6d9";
  color: #fff;
}

/deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before {
  content: "\e6d8" !important;
  color: #fff;
}

/deep/.el-table__expand-icon--expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  color: #fff;
}
</style>